<template>
  <div class="tab-box">
    <div class="tab">
      <cube-tab-bar
        v-model="selectedLabel"
        :data="tabs"
        :useTransition=false
        :showSlider=true
        ref="tabBar"
        @change="onChange">
      </cube-tab-bar>

      <div class="tab-content">
      <cube-slide
        :initial-index="index"
        :loop="false"
        :auto-play="false"
        :show-dots="false"
        @change="changePage"
        :options="options"
        ref="slide"
        @scroll="onScroll">
        <cube-slide-item v-for="(tab, index) in tabs" :key="index">
          <component ref="component" :is="tab.component" :data="tab.data"></component>
        </cube-slide-item>
      </cube-slide>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tab',
  props: {
    tabs: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      index: 0,
      options: {
        listenScroll: true,
        probeType: 3,
        directionLockThreshold: 0
      }
    }
  },
  methods: {
    onChange (label) {
      const labelArray = ['商品', '评论', '商家']
      this.index = labelArray.indexOf(label)
    },
    changePage (current) {
      this.index = current
    },
    onScroll (pos) { // tab滚动切换特效
      const tabBarWidth = this.$refs.tabBar.$el.clientWidth
      const slideWidth = this.$refs.slide.slide.scrollerWidth
      const transform = -pos.x / slideWidth * tabBarWidth
      this.$refs.tabBar.setSliderTransform(transform)
    }
  },
  computed: {
    selectedLabel () { // TODO 这里计算属性处理有问题
      return this.tabs[this.index].label
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~assets/styles/variable.styl"
@import "~cube-ui/src/common/stylus/mixin.styl"

.tab >>> .cube-tab_active
  color $color-tab-active
.tab >>> .cube-tab-bar
  height $height-tab
  font-size $fontsize-medium
  line-height $fontsize-medium
  color $color-tab
.tab-box
  position: fixed
  top: 136px
  left: 0
  right: 0
  bottom: 0
  .tab
    display flex
    flex-direction column
    height 100%
  .tab-content
    flex 1
    overflow hidden
</style>
